<!DOCTYPE html>
<html>
  <head>
    <title>{{ title }}</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=9BPpBz2Gvb">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=9BPpBz2Gvb">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png?v=9BPpBz2Gvb">
    <link rel="manifest" href="/site.webmanifest?v=9BPpBz2Gvb">
    <link rel="mask-icon" href="/safari-pinned-tab.svg?v=9BPpBz2Gvb" color="#5bbad5">
    <meta name="msapplication-TileColor" content="#da532c">
    <meta name="theme-color" content="#ffffff">

    
    <meta name="title" content="James Long" />
    <meta
      name="description"
      content="James Long's blog"
      />

    {% block facebookMeta %}
    {% endblock %}

    {% block twitterMeta %}
    {% endblock %}

    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="alternate" type="application/atom+xml" href="https://jlongster.com/atom.xml" title="Atom Feed" />
    <link rel="stylesheet" type="text/css" href="/css/highlight/theme.css" />
    <link rel="stylesheet" type="text/css" href="/build/base.css?v=1000" />
    <link href="https://fonts.googleapis.com/css?family=Inter:400,400i,700,700i|Unica+One:400,600&display=fallback" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif:wght@700&family=Roboto+Slab:wght@600;700;800;900&display=swap" rel="stylesheet">
    {% block css %}{% endblock %}
  </head>
  <body class="font-body text-dark-text {{ bgcolor or "bg-gray-100" }}" id="{{ bodyid }}">
    <header class="text-white font-display z-50 {% block headerclass %}{% endblock %}" {% block headerattr %}{% endblock %}>
      <div class="container mx-auto flex flex-col md:flex-row items-center py-5 px-5">
        <a href="/">
          <div class="flex items-center text-2xl tracking-tight">
            <img src="/img/logo2.svg" class="w-8 h-8 mr-2"/>
            JAMES LONG
          </div>
        </a>
        <div class="flex-grow"></div>

        <div class="mt-2 md:mt-0">
          <a href="/#posts" class="text-xl tracking-tight">
            POSTS
          </a>
          
          <a href="/#talks" class="ml-2 md:ml-8 text-xl tracking-tight">
            TALKS
          </a>
        </div>

      </div>
    </header>
    {% block afterheader %}{% endblock %}

    <div>
      {% block content %}{% endblock %}
    </div>

    <footer class="mt-20 bg-gray-500 text-white">
      <div class="h-1" style="background: linear-gradient(#F3F2F7, #4fd1c5)"></div>

      <div class="container mx-auto px-5 lg:px-32 flex flex-col items-center">
        <a href="/"><img src="/img/logo2.svg" class="w-10 h-10 mt-10 float-left mb-6"/></a>

        <div class="mb-8 md:px-32 text-center text-gray-200">
          James Long is a developer & designer with over a decade of
          experience building large-scale applications.
          <a class="text-teal-300" href="mailto:longster@gmail.com">Get in touch</a>
        </div>

        <div class="flex items-center mb-8">
          <a href="/#posts" class="font-display uppercase text-xl">posts</a>
          <a href="/#talks" class="font-display uppercase text-xl ml-4">talks</a>
        </div>
        

        <ul class="flex items-center mb-3">
          <li><a href="https://twitter.com/jlongster"><img src="/img/twitter.svg" class="w-10 h-10"/></a></li>
          <li><a href="https://github.com/jlongster"><img src="/img/github.svg" class="w-10 h-10"/></a></li>
          <li><a href="https://jlongster.com/atom.xml"><img src="/img/rss.svg" class="w-10 h-10"/></a></li>
        </ul>

        <div class="text-gray-400 mb-5 text-sm">
          &copy; James Long 2020
        </div>
      </div>
    </footer>

    {% if not dev %}
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-9014321-1', 'auto');
      ga('send', 'pageview');
    </script>
    {% endif %}
    
    {% if dev %}
    <script>
      setInterval(() => {
        fetch('/modified')
          .then(res => res.text())
          .then(text => {
            text = text.trim();
            if(text === "true") {
              location.reload()
            }
          })
      }, 500)
    </script>
    {% endif %}
  </body>
</html>
